<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="pay h100p" :style="globalData.appStyle.mainStyle">
    <view class="navbar" :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#fff" color="#000" title="充值提现" left-icon="left" @clickLeft="back" />
    </view>
    <view class="contentBox" :style="globalData.appStyle.contentStyle">
      <view class="contentWithFooter" :style="contentWithFooterStyle">
        <view class="w100p cardBox">
          <image :src="cardUrl" mode="aspectFit" class="cardUrl" />
          <view class="cardLabel flb w100p h100p">
            <image class="el1 psas w18 h18 mr16" src="/static/img/my/point.png" mode="aspectFit" />
            <view class="el2 psas cWH f14 h20 l20">当前可用积分</view>
            <view class="el3 psas cWH h48 flr">
              <view class="cWH f48 h48 l48 mr4">{{ globalData.userInfo.pointsBalance }}</view>
              <view class="el4 flex1">
                <view class="el5 cWH f20 h20 l20">积分</view>
              </view>
            </view>
            <view class="el6 psas cWH f14 l20 h20">积分可用于查看电话、提升曝光或提现</view>
            <view class="el7 psas f16 cBL" @click="jumpToPage('/pages/my/point')">积分明细</view>
            <view v-if="isCharge" class="el8 psas f16 cBL" @click="changeCharge(false)">提现</view>
            <view v-if="!isCharge" class="el8 psas f16 cBL" @click="changeCharge(true)">充值</view>
          </view>
        </view>
        <view v-if="isCharge">
          <view class="payLabel cBL bold f16">充值积分</view>
          <view class="flw">
            <view v-for="(item, index) in pointList" :key="item.point" @click="pointItemClick(index)" class="pointItem flc" :class="[index % 2 === 0 ? 'pointItemRight' : 'pointItemLeft', index === curIdx ? 'activeItem' : '']">
              <view class="points f20 cYE tc">{{ item.point }}</view>
              <view class="price f16 tc cBL" :class="[index === curIdx ? 'activePrice' : '']">{{ item.price }}</view>
            </view>
          </view>
          <view class="momenyBox mt20 flr">
            <view class="momeny cYE">￥</view>
            <input type="number" v-model="payData.qty" class="input1" placeholder="请输入自定义金额" />
          </view>
          <view class="payLabel cBL f14 mt10">购买须知</view>
          <view class="flc cGY1 f14 l24">
            <text class="cGY1 f14">1.积分购买后立即生效</text>
            <text>
              2.自定义充值金额只能为100的倍数,支付比例为
              <text class="cYE">1RMB={{ globalData.platformInfo.RMB_TO_POINTS_RATIO }}积分</text>
            </text>
            <text>3.如您已拥有积分权益，再次购买积分后，权益可叠加享受</text>
            <text>4.该产品属于数字化商品，购买后不支持退款</text>
            <text>
              5.如您需要更多咨询，可拨打
              <text class="cYE">{{ globalData.platformInfo.CUSTOMER_SERVICE_TEL }}</text>
            </text>
          </view>
        </view>
        <view v-if="!isCharge">
          <view class="payLabel cBL bold f16">兑换积分</view>
          <view class="momenyBox mt10 flb">
            <input type="number" v-model="withDrawData.qty" class="input2" placeholder="请输入兑换积分" />
            <view class="flr">
              <view class="flr cGY3">{{ '积分 | 获得 ￥' }}</view>
              <view class="flr cYE">{{ withDrawData.qty / 10 || 0 }}</view>
            </view>
          </view>
          <view class="payLabel cBL f14 mt20">提现规则</view>
          <view class="flc cGY1 f14 l24">
            <text>
              1.用户提现扣减
              <text class="cYE">{{ globalData.platformInfo.WITHDRAW_COMMISSION_RATIO }}%</text>
              手续费
            </text>
            <text>
              2.用户
              <text class="cYE">{{ globalData.platformInfo.WITHDRAW_LOWEST_POINTS }}</text>
              积分起进行提现
            </text>
            <text>
              3.每日提现
              <text class="cYE">{{ globalData.platformInfo.WITHDRAW_TIMES_EVERY_DAY }}</text>
              次，最高限额
              <text class="cYE">{{ globalData.platformInfo.WITHDRAW_MAX_POINTS_EVERY_DAY }}</text>
              积分，提现积分限为100的倍数
            </text>
          </view>
          <view class="payLabel cBL f14 mt10">获取积分</view>
          <view class="flc cGY1 f14 l24">
            <text>
              1.普通用户发布需求，每被查看一次，最高可获得打赏的
              <text class="cYE">{{ globalData.platformInfo.UNCERTIFICATED_CONTACTED_INCOME_RATIO }}%</text>
              积分，企业认证用户，最高可获取打赏
              <text class="cYE">{{ globalData.platformInfo.CERTIFICATED_CONTACTED_INCOME_RATIO }}%</text>
              的积分
            </text>
            <text>
              2.发布人获取打赏收益，受好评度影响，
              <text class="cYE">五星、四星、三星</text>
              分别对
              <text class="cYE">{{ `${globalData.platformInfo.FIVE_STAR_INCOME_RATIO}%、${globalData.platformInfo.FOUR_STAR_INCOME_RATIO}%、${globalData.platformInfo.THREE_STAR_INCOME_RATIO}%` }}</text>
              收益，三星一下将无打赏收益
            </text>
            <text>
              3.分享采购或销售需求，每被打赏1次可获得
              <text class="cYE">{{ globalData.platformInfo.SHARE_REWARDED_POINTS }}</text>
              积分
            </text>
            <text>
              4.邀请到平台入驻完善信息，并发布至少1条采购需求满
              <text class="cYE">10</text>
              人，可获得
              <text class="cYE">{{ globalData.platformInfo.INVITE_TEN_FRIENDS_POINTS }}</text>
              积分
            </text>
          </view>
        </view>
      </view>
      <FixedBottomBtn v-if="showFixedBottom" :btnText="btnText" :hasBottom="hasBottom" lb1="充值即代表同意" lb2="《E商机用户充值协议》" @btnFun="submit" />
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
import FixedBottomBtn from '@/component/FixedBottomBtn.vue';
export default {
  mixins: [commonMxins],
  data() {
    return {
      cardUrl: 'https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/my-bg.png',
      payData: { wechatPayType: '1', qty: '100', platform: '1' },
      withDrawData: { qty: '', platform: '1' },
      commonFormStyle: '',
      showFixedBottom: true,
      pointList: [
        { point: 2000, price: 0 },
        { point: 1000, price: 0 },
        { point: 600, price: 0 },
        { point: 300, price: 0 }
      ],
      curIdx: 1,
      point: 0,
      hasBottom: true,
      isCharge: true,
      btnText: '立即充值'
    };
  },
  components: { FixedBottomBtn },
  onLoad() {
    this.queryRmbToPointsRatio();
  },
  onShow() {
    this.bottomHeightChange();
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async queryRmbToPointsRatio() {
      this.pointList.forEach(el => {
        el.num = el.point / Number(this.globalData.platformInfo.RMB_TO_POINTS_RATIO);
        el.price = '￥' + String(el.point / Number(this.globalData.platformInfo.RMB_TO_POINTS_RATIO));
        el.point = el.point + '积分';
      });
    },
    changeCharge(status) {
      this.isCharge = status;
      this.hasBottom = status;
      this.payData.qty = '';
      this.btnText = status ? '立即充值' : '立即提现';
      this.bottomHeightChange();
    },
    pointItemClick(idx) {
      this.curIdx = idx;
      this.payData.qty = this.pointList[idx].num;
    },
    async submit() {
      if (this.btnText === '立即充值') {
        let qty = Number(this.payData.qty);
        if (qty > 10000 || qty <= 0 || qty % 10 !== 0) {
          uni.showToast({ title: '请填写10的倍数，最多10000', icon: 'none', durning: 2000 });
          canSubmit = false;
        } else {
          let res = await api.request({ url: '/wechatPay/initWechatPay', data: { ...this.payData, qty: Number(this.payData.qty) * this.globalData.platformInfo.RMB_TO_POINTS_RATIO } });
          wx.requestPayment({
            timeStamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr,
            package: res.data.package,
            signType: res.data.signType,
            paySign: res.data.paySign,
            success(r) {
              uni.showToast({ title: '充值成功', icon: 'success', duration: 2000 });
              this.getUserInfo();
            },
            fail() {
              uni.showToast({ title: '支付失败', icon: 'error', duration: 2000 });
            }
          });
        }
      } else {
        let qty = Number(this.withDrawData.qty);
        if (qty > this.globalData.platformInfo.WITHDRAW_MAX_POINTS_EVERY_DAY) {
          uni.showToast({ title: `每日最高限额${this.globalData.platformInfo.WITHDRAW_MAX_POINTS_EVERY_DAY}`, icon: 'none', durning: 2000 });
        } else if (qty < this.globalData.platformInfo.WITHDRAW_LOWEST_POINTS) {
          uni.showToast({ title: `${this.globalData.platformInfo.WITHDRAW_LOWEST_POINTS}积分起提`, icon: 'none', durning: 2000 });
        } else if (qty % 100 !== 0) {
          uni.showToast({ title: '积分需为100的倍数', icon: 'none', durning: 2000 });
        } else {
          let res = await api.request({ url: '/appUser/submitWithdrawApply', data: { ...this.withDrawData } });
          if (res.code === 200) {
            uni.showToast({ title: '提现提交成功', icon: 'success', duration: 2000 });
            this.getUserInfo();
          } else {
            uni.showToast({ title: res.msg, icon: 'none', duration: 2000 });
          }
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.pay {
  .navbar {
    background: #fff !important;
  }
  .contentBox {
    .contentWithFooter {
      padding: 0 12rem;
      box-sizing: border-box;
      .cardBox {
        height: 164rem;
        padding: 12rem 0;
        box-sizing: border-box;
        position: relative;
        .cardUrl {
          height: 140rem;
          width: 100%;
          border-radius: 10rem;
          background: linear-gradient(90deg, rgba(252, 123, 12, 1) 0%, rgba(251, 162, 77, 1) 100%);
          box-shadow: 0rem 5rem 6rem rgba(0, 0, 0, 0.2);
        }
        .cardLabel {
          position: absolute;
          top: 0;
          left: 0;
          .el1 {
            top: 30rem;
            left: 18rem;
          }
          .el2 {
            top: 30rem;
            left: 42rem;
          }
          .el3 {
            top: 58rem;
            left: 18rem;
            width: 270rem;
            overflow-y: hidden;
            .el4 {
              padding-top: 23rem;
            }
          }
          .el6 {
            top: 115rem;
            left: 18rem;
          }
          .el7 {
            top: 30rem;
            right: 18rem;
            width: 90rem;
            text-align: center;
            height: 36rem;
            line-height: 36rem;
            border-radius: 5px;
            background: linear-gradient(180deg, rgba(255, 240, 205, 1) 0%, rgba(255, 255, 255, 1) 100%);
          }
          .el8 {
            top: 97rem;
            right: 18rem;
            width: 90rem;
            text-align: center;
            height: 36rem;
            line-height: 36rem;
            border-radius: 5rem;
            background: linear-gradient(180deg, rgba(255, 240, 205, 1) 0%, rgba(255, 255, 255, 1) 100%);
          }
        }
      }
      .payLabel {
        height: 24rem;
        line-height: 24rem;
      }
      .pointItem {
        height: 100rem;
        margin-top: 10rem;
        border: 1rem solid rgba(255, 232, 212, 1);
        box-sizing: border-box;
        border-radius: 10rem;
        position: relative;
        width: 47%;
        .points {
          height: 64rem;
          border-top-left-radius: 10rem;
          border-bottom-right-radius: 10rem;
          line-height: 64rem;
        }
        .price {
          height: 34rem;
          border-bottom-left-radius: 10rem;
          border-bottom-right-radius: 10rem;
          line-height: 34rem;
          background: #ffe8d4;
        }
      }
      .pointItemRight {
        margin-right: 3%;
      }
      .pointItemLeft {
        margin-left: 3%;
      }
      .activeItem {
        border: 1rem solid #ff7c00;
        .activePrice {
          background: #ff7c00;
          color: white;
        }
      }
      .momenyBox {
        padding: 22rem 12rem;
        height: 68rem;
        box-sizing: border-box;
        background: #ebebeb;
        border-radius: 10rem;
        .momeny {
          font-size: 24rem;
          line-height: 24rem;
          margin-right: 8rem;
        }
        .input1 {
          height: 24rem;
          font-size: 18rem;
          color: #333;
        }
        .input2 {
          height: 24rem;
          font-size: 18rem;
          color: #333;
          width: 200rem;
        }
      }
    }
  }
}
</style>
